<template>
  <div class="info-item card-item">
    <div class="title-info">
      <i class="iconfont icon-buzhou" style="color: #F59E0B"></i>
      <span class="sub-title">步骤信息</span>
    </div>

    <div class="step-info">
      <div v-for="(item, index) in foodStore.currentRecipe.stepList"
           :key="index" class="step-container">
        <span class="step-number">第{{ index + 1 }}步</span>
        <div class="step-body">
          <span class="step-content">{{ item.content }}</span>
          <img v-if="item.imageUrl"
               :src="serviceFileRootPath + item.imageUrl" alt="暂无图片" class="step-image"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useFoodStore } from '@/store/food.ts'
import { serviceFileRootPath } from '@/utils'

const foodStore = useFoodStore()
</script>
